<template>
  <basic-container>
    <h3>二维码生成</h3>
    <div class="box">
      <!-- 酒店选择 -->
      <div class="ShopName">
        <avue-crud
          ref="crud"
          :data="
            tableData.slice(
              (page.pageNum - 1) * page.pageSize,
              page.pageNum * page.pageSize
            )
          "
          :option="option"
          :page.sync="page"
          @on-load="onLoad"
          @current-row-change="handleCurrentRowChange"
        >
        
  <template slot="menuLeft" slot-scope="{size}">
    <el-button v-if="Merchant != ''" @click="setCurrent()" :size="size">取消选择</el-button>
  </template>
        </avue-crud>
      </div>
      <!-- 二维码编辑 -->
      <div class="code">
        <el-input
          placeholder="请输入标题"
          v-model="title"
          style="margin-bottom: 5px; font-size: 15px"
          clearable
          :maxlength="7"
        >
        </el-input>
        <div class="Input_box">
          <el-input
            placeholder="请输入温馨提示"
            style="width: 45%; margin-bottom: 5px; font-size: 12px"
            clearable
            v-model="reminder"
            :maxlength="8"
          >
          </el-input>
          <el-input
            placeholder="请输入疫情标语"
            style="width: 45%; margin-bottom: 5px; font-size: 12px"
            clearable
            v-model="epidemic"
            :maxlength="8"
          >
          </el-input>
          <el-input
            placeholder="请输入服务标语1"
            style="width: 45%; margin-bottom: 5px; font-size: 12px"
            clearable
            v-model="service1"
            @input="inputhandle"
            :maxlength="4"
          >
          </el-input>
          <el-input
            placeholder="请输入服务标语2"
            style="width: 45%; margin-bottom: 5px; font-size: 12px"
            clearable
            v-model="service2"
            @input="inputhandle"
            :maxlength="4"
          >
          </el-input>
          <el-input
            placeholder="请输入服务标语3"
            style="width: 45%; margin-bottom: 5px; font-size: 12px"
            clearable
            v-model="service3"
            @input="inputhandle"
            :maxlength="4"
          >
          </el-input>
          <el-input
            placeholder="请输入服务标语4"
            style="width: 45%; margin-bottom: 5px; font-size: 12px"
            clearable
            v-model="service4"
            @input="inputhandle"
            :maxlength="4"
          >
          </el-input>
          <el-input
            placeholder="请输入服务标语5"
            style="width: 45%; margin-bottom: 5px; font-size: 12px"
            clearable
            v-model="service5"
            @input="inputhandle"
            :maxlength="4"
          >
          </el-input>
          <el-input
            placeholder="请输入服务标语6"
            style="width: 45%; margin-bottom: 5px; font-size: 12px"
            clearable
            v-model="service6"
            @input="inputhandle"
            :maxlength="4"
          >
          </el-input>
          <el-input
            placeholder="请输入服务标语7"
            style="width: 45%; margin-bottom: 5px; font-size: 12px"
            clearable
            v-model="service7"
            @input="inputhandle"
            :maxlength="4"
          >
          </el-input>
          <el-input
            placeholder="请输入服务标语8"
            style="width: 45%; margin-bottom: 5px; font-size: 12px"
            clearable
            v-model="service8"
            @input="inputhandle"
            :maxlength="4"
          >
          </el-input>
          <el-input
            placeholder="请输入服务标语9"
            style="width: 45%; margin-bottom: 5px; font-size: 12px"
            clearable
            v-model="service9"
            @input="inputhandle"
            :maxlength="4"
          >
          </el-input>
          <el-input
            placeholder="请输入服务标语10"
            style="width: 45%; margin-bottom: 5px; font-size: 12px"
            clearable
            v-model="service10"
            @input="inputhandle"
            :maxlength="4"
          >
          </el-input>
        </div>

        <div ref="imageTofile" class="code_box">
          <h2>{{ title }}</h2>
          <div class="tips">
            <div class="tips_content" v-show="reminder !== ''">
              <div class="tips_img">
                <img src="../../../../public/img/code/Tips.png" alt="" />
              </div>
              {{ reminder }}
            </div>
            <div class="code_content">
              <img src="" alt="二维码自动生成，请编辑其他样式" />
            </div>
            <div class="epidemic_content" v-show="epidemic !== ''">
              <div class="epidemic_img">
                <img src="../../../../public/img/code/epidemic.png" alt="" />
              </div>
              {{ epidemic }}
            </div>
          </div>
          <div class="service" v-show="explicit">
            <div v-show="service1 !== ''">
              {{ service1 }}
            </div>
            <div v-show="service2 !== ''">
              {{ service2 }}
            </div>
            <div v-show="service3 !== ''">
              {{ service3 }}
            </div>
            <div v-show="service4 !== ''">
              {{ service4 }}
            </div>
            <div v-show="service5 !== ''">
              {{ service5 }}
            </div>
            <div v-show="service6 !== ''">
              {{ service6 }}
            </div>
            <div v-show="service7 !== ''">
              {{ service7 }}
            </div>
            <div v-show="service8 !== ''">
              {{ service8 }}
            </div>
            <div v-show="service9 !== ''">
              {{ service9 }}
            </div>
            <div v-show="service10 !== ''">
              {{ service10 }}
            </div>
          </div>
        </div>
        <div class="product">
          <img :src="imgUrl" alt="" />
        </div>
      </div>
      <!-- 房间选择 -->
      <div class="RoomNumber">
        <div style="margin-bottom: 10px">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-download"
            @click="exportTemplate"
            >导出模板</el-button
          >
          <div id="upload_box">
            <el-button type="primary" size="small" icon="el-icon-upload"
              >导入</el-button
            >
            <input
              id="upload"
              type="file"
              @change="importfxx(this)"
              ref="referenceUpload"
              accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            />
          </div>
          <el-button
            type="primary"
            size="small"
            @click="obtain"
            style="margin-bottom: 5px; margin-left: 10px"
            >图片生成</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="download"
            style="margin-bottom: 5px"
            >下载</el-button
          >
        </div>
        <avue-crud
          :data="
            RoomNumber.slice(
              (Roompage.pageNum - 1) * Roompage.pageSize,
              Roompage.pageNum * Roompage.pageSize
            )
          "
          :option="Roomoption"
          :page="Roompage"
          @on-load="RoomonLoad"
          @selection-change="selectionChange"
          @row-del="rowDel"
        >
        </avue-crud>
      </div>
    </div>
  </basic-container>
</template>

<script>
import { mapGetters } from "vuex";
// let baseUrl = "http://192.168.0.220:8091";
// let imageUrl = "http://192.168.0.220:8091/photos/";
let baseUrl = "http://122.51.69.142:8091"; //服务器地址
let imageUrl = "http://122.51.69.142:8091/photos/";

export default {
  data() {
    return {
      page: {
        total: 0,
        layout: "total,pager,prev, next",
        background: false,
        pageNum: 1,
        pageSize: 10,
      },
      Roompage: {
        total: 0,
        layout: "total,pager,prev, next",
        background: false,
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      RoomNumber: [],
      option: {
        highlightCurrentRow: true,
        align: "center",
        menuAlign: "center",
        menu: false,
        addBtn: false,
        dialogClickModal: false,
        column: [
          {
            label: "酒店编号",
            prop: "name",
          },
        ],
      },
      Roomoption: {
        editBtn: false,
        emptyText: "请导入房间编号列表",
        align: "center",
        menuAlign: "center",
        addBtn: false,
        selection: true,
        dialogClickModal: false,
        column: [
          {
            label: "房间编号",
            prop: "name",
          },
        ],
      },
      title: "",
      reminder: "",
      epidemic: "",
      service1: "",
      service2: "",
      service3: "",
      service4: "",
      service5: "",
      service6: "",
      service7: "",
      service8: "",
      service9: "",
      service10: "",
      explicit: false, // 设置服务标语显隐
      htmlUrl: "",
      upLoadShow: false,
      isShow: false,
      serviceList: [], //服务标语数组
      Merchant: "", //选中的酒店编号
      tableSelectList: [], // 选中的数据
      Dimensional: [], //获取二维码数组
      imgUrl: "", //图片设置默认地址
      file: [], //导入数据
      imgsUrl: [], //图片地址数组
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  mounted() {
    this.shop();
  },
  methods: {
    // 获取店铺名称
    shop() {
      this.userInfo.userInfo.roles[0].shops.forEach((item) => {
        this.tableData.push({
          shopId: item.shopId,
          name: item.name,
        });
      });
      // let _this = this;
      // _this.$ajax
      //   .post(`${baseUrl}/pc/getShopList`)
      //   .then(function (res) {
      //     //请求成功
      //     let resData = res.data;
      //     if (resData.code == 200) {
      //       resData.data.forEach((item) => {
      //         _this.tableData.push({
      //           shopId: item.shopId,
      //           name: item.name,
      //         });
      //       });
      //       _this.page.total = _this.tableData.length;
      //     } else {
      //       _this.$message.error(resData.msg);
      //     }
      //   })
      //   .catch(function (error) {
      //     //请求失败
      //     console.log(error);
      //   });
    },
    // 酒店单选
    handleCurrentRowChange(val) {
      if (val != null) {
        this.Merchant = val.shopId;
      }else {
        this.Merchant = "";
      }
    },
    // 删除按钮
    rowDel(row, index) {
      this.$confirm("是否删除该条信息？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.RoomNumber.splice(index, 1);
        this.Roompage.total = this.RoomNumber.length;
      });
    },
    // 选中数据
    selectionChange(list) {
      this.tableSelectList = [];
      list.forEach((e) => {
        this.tableSelectList.push(e.name);
      });
      // console.log(this.tableSelectList);
    },
    // 酒店列表分页
    onLoad(page) {
      this.page.pageNum = page.currentPage; //页数
    },
    // 房间列表分页
    RoomonLoad(page) {
      this.Roompage.pageNum = page.currentPage; //页数
    },
    // 判断输入框是否为空
    inputhandle() {
      if (
        this.service1 == "" &&
        this.service2 == "" &&
        this.service3 == "" &&
        this.service4 == "" &&
        this.service5 == "" &&
        this.service6 == "" &&
        this.service7 == "" &&
        this.service8 == "" &&
        this.service9 == "" &&
        this.service10 == ""
      ) {
        this.explicit = false;
      } else {
        this.explicit = true;
      }
    },
    //导出模板
    exportTemplate() {
      window.location.href =
        window.document.location.origin + "/util/muban.xlsx";
    },
    //文件上传成功
    importfxx(obj) {
      let _this = this;
      let inputDOM = this.$refs.inputer;
      // 通过DOM取文件数据
      _this.file = event.currentTarget.files[0];

      var rABS = false; //是否将文件读取为二进制字符串
      var f = _this.file;

      var reader = new FileReader();
      //if (!FileReader.prototype.readAsBinaryString) {
      FileReader.prototype.readAsBinaryString = function (f) {
        var binary = "";
        var rABS = false; //是否将文件读取为二进制字符串
        var pt = this;
        var wb; //读取完成的数据
        var outdata;
        var reader = new FileReader();
        reader.onload = function (e) {
          var bytes = new Uint8Array(reader.result);
          var length = bytes.byteLength;
          for (var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
          var XLSX = require("xlsx");
          if (rABS) {
            wb = XLSX.read(btoa(fixdata(binary)), {
              //手动转化
              type: "base64",
            });
          } else {
            wb = XLSX.read(binary, {
              type: "binary",
            });
          }
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的东西
          // console.log(outdata);

          let arr = [];
          outdata.forEach((item) => {
            arr.push({
              name: item.房间编号,
            });
          });
          let arr1 = [..._this.RoomNumber];
          let data = arr.concat(arr1);
          let hash = {};
          data = data.reduce((item, next) => {
            if (!hash[next.name]) {
              hash[next.name] = true;
              item.push(next);
            }
            return item;
          }, []);
          _this.RoomNumber = data;
          _this.Roompage.total = _this.RoomNumber.length;
        };
        reader.readAsArrayBuffer(f);
      };
      if (rABS) {
        reader.readAsArrayBuffer(f);
      } else {
        reader.readAsBinaryString(f);
      }
      _this.$refs.referenceUpload.value = null;
    },
    // 判断服务标签内容是否为空
    ceshi() {
      var allArr = [];
      allArr.push(this.service1);
      allArr.push(this.service2);
      allArr.push(this.service3);
      allArr.push(this.service4);
      allArr.push(this.service5);
      allArr.push(this.service6);
      allArr.push(this.service7);
      allArr.push(this.service8);
      allArr.push(this.service9);
      allArr.push(this.service10);
      allArr.join(",");
      for (var i = 0; i < allArr.length; i++) {
        if (
          allArr[i] == "" ||
          allArr[i] == " " ||
          allArr[i] == "  " ||
          allArr[i] == "   " ||
          allArr[i] == "    " ||
          allArr[i] == null ||
          typeof allArr[i] == undefined
        ) {
          allArr.splice(i, 1);
          i = i - 1;
        }
      }
      this.serviceList = allArr;
    },
    // 获取二维码
    obtain() {
      let _this = this;
      _this.ceshi();
      console.log(_this.Merchant);
      if (_this.Merchant == "") {
        _this.$message.success("请选择酒店");
      } else if (_this.tableSelectList.length == 0) {
        _this.$message.success("请选择房间编号");
      } else if (_this.serviceList == []) {
        _this.serviceList = [""];
      } else {
        _this.$ajax
          .post(`${baseUrl}/pc/massProductionQrcode`, {
            shopId: _this.Merchant,
            topText: _this.title,
            leftText: _this.reminder,
            rightText: _this.epidemic,
            centerText: _this.serviceList,
            roomNumberList: _this.tableSelectList,
          })
          .then(function (res) {
            //请求成功
            console.log(res.data);
            let resData = res.data;
            if (resData.code == 200) {
              _this.imgUrl = imageUrl + resData.data[0].sunCodeUrl;
              let idsStr = resData.data
                .map(function (obj, index) {
                  return obj.sunCodeUrl;
                })
                .join(",");
              let qs = idsStr.split(",");
              _this.imgsUrl = qs;
            } else {
              _this.$message.error(resData.msg);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      }
    },
    // 下载
    download() {
      let _this = this;
      console.log(_this.imgsUrl);
      _this.$ajax
        .post(`${baseUrl}/pc/zipFiles`, {
          fileUrl: _this.imgsUrl,
        })
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            console.log(res);
            _this.imgsUrl = [];
            const blob = new Blob([resData.data], {
              type: "application/vnd.ms-excel;charset=utf-8",
            });
            var link = document.createElement("a");
            // link.href = window.URL.createObjectURL(blob)
            link.href = imageUrl + resData.data.zipUrl;
            console.log(link.href);
            link.download = resData.data.zipUrl;
            link.click();
          } else {
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
    // 清空选中
    setCurrent(row) {
      this.$refs.crud.setCurrentRow(row);
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.box {
  width: 100%;
  height: 70vh;
  margin-top: 20px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.ShopName {
  width: 28vw;
  height: 69vh;
  overflow-y: auto;
  overflow-x: auto;
}
.RoomNumber {
  width: 34vw;
  height: 69vh;
  overflow-y: auto;
  margin: 0 15px;
}
.code {
  width: 22vw;
  height: 69vh;
  overflow-y: auto;
}
.Input_box {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin-bottom: 10px;
}
.code_box {
  width: 16vw;
  height: auto;
  padding: 0.5vw;
  margin: 0 auto;
  background: url("../../../../public/img/code/code-bg.png") no-repeat;
  background-size: 100% 100%;
}
.code_box h2 {
  height: 5vh;
  width: 100%;
  color: white;
  text-align: center;
  font-weight: 500;
}
.tips {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  margin-bottom: 15px;
}
.epidemic_img,
.tips_img {
  width: 4vw;
  height: 6vh;
  margin-bottom: 10px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}

.epidemic_content,
.tips_content {
  width: 4vw;
  height: 13vh;
  color: white;
  text-align: center;
}
.tips_img img {
  width: 73px;
  height: 28px;
}
.epidemic_img img {
  width: 43px;
  height: 53px;
}
#upload_box {
  display: inline-block;
  position: relative;
  margin-left: 15px;
}
#upload {
  width: 6vw;
  height: 7vh;
  position: absolute;
  left: 0;
  opacity: 0;
}
.code_content {
  width: 6vw;
  height: 13vh;
  margin: 0 1vw;
  font-size: 12px;
  color: white;
  text-align: center;
  font-size: 12px;
}
.code_content img {
  width: 6vw;
  height: 13vh;
}
.service {
  width: 15vw;
  height: auto;
  margin: auto;
  padding: 0.5vw;
  background-color: white;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: flex-start;
  align-items: stretch;
}
.service div {
  width: 7vw;
  height: 5vh;
  line-height: 4.5vh;
  color: white;
  font-size: 23px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 10px;
  background: url("../../../../public/img/code/slogan.png") no-repeat;
  background-size: 100% 100%;
  border-radius: 5px;
}
.product {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  margin-top: 10px;
}
.product img {
  width: 17vw;
  height: auto;
}
@media screen and (max-width: 1377px) {
  .code_box h2 {
    height: 5vh;
    width: 100%;
    color: white;
    text-align: center;
    font-weight: 500;
    font-size: 19px;
  }
  .epidemic_content,
  .tips_content {
    width: 4vw;
    height: 13vh;
    font-size: 13px;
    color: white;
    text-align: center;
  }
  .tips_img img {
    width: 68px;
    height: 21px;
  }
  .epidemic_img img {
    width: 30px;
    height: 35px;
  }
  .service div {
    width: 7vw;
    height: 5vh;
    line-height: 4.5vh;
    color: white;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 10px;
    background: url("../../../../public/img/code/slogan.png") no-repeat;
    background-size: 100% 100%;
    border-radius: 5px;
  }
}
</style>